import React from "react";
import Button, {
    APPEARANCES,
    AppearancesTypes,
    SIZES,
    SizesTypes,
} from "./index";
import {
    withKnobs,
    text,
    boolean,
    select,
} from "@storybook/addon-knobs";


export const knobsBtn = () => (
    <Button
        size={select<SizesTypes>("size", SIZES, SIZES.medium)}
        href={text("hrefText", "")}
        isLink={boolean("isLink", false)}
        loadingText={text("loadingTEXT", "I AM LOADING")}
        isLoading={boolean("isLoading", false)}
        disabled={boolean("disabled", false)}
        appearance={select<AppearancesTypes>(
            "APPEARANCES",
            APPEARANCES,
            APPEARANCES.primary
        )}
    >
        {text("childrenText", "Hello Storybook")}
    </Button>
);
export const buttons = () => (
    <>
        <Button appearance="primary">Primary</Button>
        <Button appearance="secondary">Secondary</Button>
        <Button appearance="tertiary">Tertiary</Button>
        <Button appearance="outline">Outline</Button>
        <Button appearance="primaryOutline">Outline primary</Button>
        <Button appearance="secondaryOutline">Outline secondary</Button>
        <div style={{ background: "grey", display: "inline-block" }}>
            <Button appearance="inversePrimary">Primary inverse</Button>
        </div>
        <div style={{ background: "grey", display: "inline-block" }}>
            <Button appearance="inverseSecondary">Secondary inverse</Button>
        </div>
        <div style={{ background: "grey", display: "inline-block" }}>
            <Button appearance="inverseOutline">Outline inverse</Button>
        </div>
    </>
);

export const sizes = () => (
    <>
        <Button appearance="primary">Default</Button>
        <Button appearance="primary" size="small">
            Small
        </Button>
    </>
);

export const loading = () => (
    <>
        <Button appearance="primary" isLoading>
            Primary
        </Button>
        <Button appearance="secondary" isLoading>
            Secondary
        </Button>
        <Button appearance="tertiary" isLoading>
            Tertiary
        </Button>
        <Button appearance="outline" isLoading>
            Outline
        </Button>
        <Button appearance="outline" isLoading loadingText="Custom...">
            Outline
        </Button>
    </>
);

export const disabled = () => (
    <>
        <Button appearance="primary" disabled>
            Primary
        </Button>
        <Button appearance="secondary" disabled>
            Secondary
        </Button>
        <Button appearance="tertiary" disabled>
            Tertiary
        </Button>
        <Button appearance="outline" disabled>
            Outline
        </Button>
    </>
);

export const link = () => (
    <>
        <Button appearance="primary" isLink href="/">
            Primary
        </Button>
        <Button appearance="secondary" isLink href="/">
            Secondary
        </Button>
        <Button appearance="tertiary" isLink href="/">
            Tertiary
        </Button>
        <Button appearance="outline" isLink href="/">
            Outline
        </Button>
    </>
);

export default {
    title: "Components/Button",
    component: Button,
    decorators: [withKnobs],
};
